<!-- * 文件名：我的用户
* 作者：ZQK
* 描述：〈描述〉
* 修改人：ZQK
* 修改时间：2025-3-9  -->
<template>
	<view class="myUsers">
		<view class="statistics">
			<view class="statisticsItem">
				<view class="statisticsItemNum">{{temp.balance}}</view>
				<view class="statisticsItemText">待提现佣金</view>
			</view>
			<view class="vertical"></view>
			<view class="statisticsItem">
				<view class="statisticsItemNum">{{temp.withdrawnAmount}}</view>
				<view class="statisticsItemText">提现中</view>
			</view>
			<view class="vertical"></view>
			<view class="statisticsItem">
				<view class="statisticsItemNum">{{temp.totalAmount}}</view>
				<view class="statisticsItemText">累计佣金</view>
			</view>
		</view>
		<view class="subsection">
			<subsection :list="subsectionList" @sectionChange="sectionChange"></subsection>
		</view>
		<view class="content">
			
			<PageScrollView
			ref="PageScrollViewRef"
			:init-param="param"
			@send-data="loadData"
			:scrollAuto="false"
			:isPropsChange="false"
			:isRevenue="sectionStatus === 0?false: true"
			:noMoreSize="1">
				<view class="list">
					<view class="" v-for="(item, index) in list" :key="index">
						<view class="item" v-if="sectionStatus === 0">
							<view class="itemLeft">
								<view class="itemImage">
									<image :src="item.avatar?item.avatar:getUrl('/missing-face.png')" mode="heightFix"></image>
								</view>
								<view class="itemText">
									<view class="itemName">{{item.nickName}}</view>
									<view class="itemPhone">{{item.phonenumber}}</view>
								</view>
							</view>
							<view class="itemRight">{{item.createTime}}</view>
						</view>
						<view class="incomeItem" v-else>
							<view class="scrollTitle">
								<view class="titleText">
									<view class="vertical"></view>
									<view class="text">{{ item.yearMonth }}</view>
								</view>
								<view class="money">￥{{item.totalAmount}}</view>
							</view>
							<view class="scrollList">
								<view 
								class="cellCrad" 
								v-for="(e, index) in item.profitRecord" 
								:key="index">
									<view class="itemImage">
										<image
										:src="e.avatar?e.avatar:getUrl('/missing-face.png')"
										mode="heightFix"></image>
									</view>
									<view class="cellCradRightText">
										<view class="cellTop">
											<view class="cellTitle">
												<view class="phonenumber">{{e.phonenumber}}</view>
												<view class="createTime">{{e.createTime}}</view>
											</view>
										</view>
										<view class="cellBottom">￥{{e.changeMoney}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</PageScrollView>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { onShow, onLoad } from "@dcloudio/uni-app"
	import subsection from '@/components/subsection/index.vue'
	import PageScrollView from '@/components/pageScrollView/index.vue'
	import { getUrl } from '@/utils/imagePlugin'
	import Api from '@/api/modules/home.ts'
	
	interface sectionInterface {
		name: string
	}
	
	interface tempInterface {
		balance: number
		withdrawnAmount: number
		totalAmount: number
	}
	
	interface listItemInterface {
		avatar: string
		nickName: string
		phonenumber: string
		createTime: string
	}
	
	const PageScrollViewRef = ref()
	const list = ref<Array<listItemInterface>>([])
	let param = ref<any>({
		api: Api.getMyUserList,
		param: {
			
		}
	})
	const loadData = (e: any) => {
		list.value = e
	}
	const getList = () => {
		list.value = []
	  PageScrollViewRef.value.downCallback()
	}
	let temp = ref<tempInterface>({
		balance: 0,
		withdrawnAmount: 0,
		totalAmount: 0,
	})
	
	let incomeList = ref<Array<listItemInterface>>([])
	
	const subsectionList = reactive<Array<sectionInterface>>([
		{ name: '我的用户' },
		{ name: '我的收益' }, 
	])
	let sectionStatus = ref<number>(0)
	const sectionChange = async (index: number) => {
		sectionStatus.value = index
		if(index === 0){
			param.value.api = Api.getMyUserList
		} else {
			param.value.api = Api.getUserRevenueList
		}
		getList()
	}
	
	const getUserBalance = () => {
		Api.getUserBalance().then((res: any) => {
			temp.value.balance = res.data.balance
			temp.value.withdrawnAmount = res.data.withdrawnAmount
			temp.value.totalAmount = res.data.totalAmount
		})
	}
	
	const getUserRevenueList = () => {
		Api.getUserRevenueList().then((res: any) => {
			
		})
	}
	
	onLoad(()=>{
		getUserBalance()
		setTimeout(()=>{
			getList()
		}, 20)
		// getUserRevenueList()
	})
</script>

<style lang="scss" scoped>
	.myUsers{
		background: #5EB847;
		display: flex;
		flex-direction: column;
		height: 100vh;
		
		.statistics{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 28rpx;
			
			.vertical{
				width: 2rpx;
				height: 40rpx;
				background-color: #ffffff;
			}
			
			.statisticsItem{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 20rpx 60rpx;
				
				.statisticsItemNum{
					font-size: 32rpx;
					color: #ffffff;
					font-weight: 600;
					margin-bottom: 10rpx;
				}
				
				.statisticsItemText{
					font-size: 24rpx;
					color: #ffffff;
				}
			}
		}
		
		.content{
			background: #ffffff;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			margin-top: 16rpx;
			padding-top: 30rpx;
			flex: 1;
			overflow: auto;
			
			.list{
				.item{
					background-color: #dcf9e9;
					border-radius: 16rpx;
					padding: 20rpx 26rpx;
					margin: 0 28rpx 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.itemLeft{
						display: flex;
						align-items: center;
						
						
						.itemText{
							margin-left: 10rpx;
							
							.itemName{
								margin-bottom: 10rpx;
							}
							
							.itemPhone{
								
							}
						}
					}
					
					.itemRight{
						font-size: 24rpx;
						color: #7a7a7a;
					}
				}
			}
			
			.incomeItem{
				
				
				.scrollTitle{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 18rpx;
					
					.titleText{
						display: flex;
						align-items: center;
						
						.vertical{
							width: 6rpx;
							height: 26rpx;
							background: #5EB847;
							border-radius: 0rpx 4rpx 4rpx 0rpx;
							margin-right: 34rpx;
						}
						
						.text{
							font-size: 28rpx;
							color: #5EB847;
							font-weight: 600;
							max-width: 500rpx;
						}
					}
					
				}
				
				.scrollList{
					
					
					.cellCrad {
						display: flex;
						align-items: center;
						justify-content: space-between;
						background-color: #dcf9e9;
						border-radius: 16rpx;
						padding: 20rpx 26rpx;
						margin: 0 28rpx 30rpx;
						
						.cellCradRightImage{
							width: 80rpx;
							height: 80rpx;
							border-radius: 12rpx;
							border: 1rpx solid #B9915F;
							overflow: hidden;
							margin-left: 0;
							margin-right: 10rpx;
							position: relative;
								
							image{
								height: 100%;
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
							}
						}
						
						.cellCradRightText{
							flex: 1;
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-left: 20rpx;
							
							.cellTop{
								display: flex;
								align-items: center;
								margin-bottom: 12rpx;
								
								.cellTitle{
									font-size: 24rpx;
									// color: #3A3A3A;
									margin-right: 10rpx;
									// font-weight: 600;
									
									.phonenumber{
										margin-bottom: 20rpx;
									}
									
									.createTime{
										
									}
								}
							}
							.cellBottom{
								font-size: 26rpx;
								color: #999999;
							}
						}
					}
				}
			}
			
			.itemImage{
				background: #C9C9C9;
				border-radius: 100rpx;
				width: 100rpx;
				height: 100rpx;
				position: relative;
				overflow: hidden;
				
				image {
					height: 100%;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
			.money{
				color: #3A3A3A;
				font-size: 28rpx;
				margin-right: 28rpx;
			}
		}
	}
</style>